<template>
  <div class="container">
    <div style="padding:10px 0;">
      <div style="padding:15px;border:1px solid #eee;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/action' }">套餐列表</el-breadcrumb-item>
          <el-breadcrumb-item>{{ titleText }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
  

    <!-- <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="list-title"><span class="mast-icon" v-if="modelList.video_path.request">*</span>{{
            modelList.video_path.name }}:</div>
        </el-col>
        <el-col :span="21">
          <div style="position:relative;width:340px;" v-if="modelList.video_path.value">
            <span class="del-video-btn"><el-button @click="delVideo" type="danger" icon="el-icon-delete"
                circle></el-button></span>
            <video :src="videoLoadSrc + modelList.video_path.value" style="width:300px;height:160px" controls></video>
          </div>
          <el-upload class="avatar-uploader" :action="videoLoadPath" :show-file-list="false"
            :on-success="videoHeaderSuccess" :before-upload="videoHeaderUpload">
            <el-button type="warning" icon="el-icon-upload2" size="medium">上传</el-button>
          </el-upload>
          <p style="color:red">视频规格：小于50M(格式：mp4、mpeg、mov、m4v、3gp、avi、m3u8)</p>
        </el-col>
      </el-row>
    </div> -->
    <div class="list-group">
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="list-title"><span class="mast-icon" v-if="modelList.name.request">*</span>名称:
          </div>
        </el-col>
        <el-col :span="10">
          <el-input v-model="modelList.name.value" placeholder="请输入"></el-input>
        </el-col>
      </el-row>
    </div>

     <div class="list-group">
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="list-title"><span class="mast-icon">*</span>价格:
          </div>
        </el-col>
        <el-col :span="10">
          <el-input v-model="modelList.price.value" placeholder="请输入"></el-input>
        </el-col>
      </el-row>
    </div>
 

     <div class="list-group">
      <el-row :gutter="3">
        <el-col :span="3">
          <div class="list-title"><span class="mast-icon">*</span>分类:</div>
        </el-col>
        <el-col :span="3">
          <el-select v-model="modelList.cate_id.value" placeholder="请选择">
            <el-option v-for="item in cateIdArr" :key="item.categoryId" :label="item.name" :value="item.categoryId">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </div>


    <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="list-title"><span class="mast-icon" v-if="modelList.cover.request">*</span>缩率图:</div>
        </el-col>
        <el-col :span="21">
          <img-upload :img-url.sync="modelList.cover.value"></img-upload>
    
        </el-col>
      </el-row>
    </div>

    <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="list-title"><span class="mast-icon" v-if="modelList.detailimg.request">*</span>详细图:</div>
        </el-col>
        <el-col :span="21">
          <img-upload :img-url.sync="modelList.detailimg.value"></img-upload>
    
        </el-col>
      </el-row>
    </div>


    <!-- <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="list-title"><span class="mast-icon" v-if="modelList.coverlist.request">*</span>产品多图:</div>
        </el-col>
        <el-col :span="21">
         <img-upload-list :file-list.sync="modelList.coverlist.value" :sise="10"></img-upload-list>        
        </el-col>
      </el-row>
    </div> -->






<!-- file-list 传列表 size 文件大小  disabled 是否禁用 siseFormat 限制大小的单位（kb，m，g等）默认1m -->

 
    

    <!-- <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="list-title"><span class="mast-icon"  v-if="modelList.printtime_dz.request">*</span>对账打印日期:
          </div>
        </el-col>
        <el-col :span="21">
          <el-input v-model="modelList.printtime_dz.value" :placeholder="modelList.printtime_dz.placeholder"></el-input>
        </el-col>
      </el-row>
    </div> -->

    

    <!-- <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="list-title"><span class="mast-icon" v-if="modelList.description.request">*</span>描述:</div>
        </el-col>
        <el-col :span="21">
          <el-input v-model="modelList.description.value" :placeholder="modelList.description.placeholder" :rows="6"
            type="textarea"></el-input>
        </el-col>
      </el-row>
    </div> -->
 
 



   

     <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
            <div class="list-title"><span class="mast-icon" v-if="modelList.status.request">*</span>状态:</div>
        </el-col>
        <el-col :span="21">
          <el-radio-group v-model="modelList.status.value">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
    </div>
  


    <!-- <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="list-title"><span class="mast-icon" v-if="modelList.recommend_type.request">*</span>{{
            modelList.recommend_type.name }}:</div>
        </el-col>
        <el-col :span="21">
          <el-radio-group v-model="modelList.recommend_type.value">
            <el-radio :label="0">默认</el-radio>
            <el-radio :label="1">推荐到首页</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
    </div> -->
    <!-- <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="list-title"><span class="mast-icon" v-if="modelList.skill.request">*</span>{{ modelList.skill.name
          }}:
          </div>
        </el-col>
        <el-col :span="21">
          <el-tag style="margin:4px 4px 0 0" v-for="(tag, index) in tags" :key="index" closable @close="tagClose(index)">
            {{ tag }}
          </el-tag>
          <span style="margin-left:10px;">
            <el-input v-model="tagsVal" placeholder="请输入" style="width:200px;" v-if="tagsShwo"
              @blur="tagInputMethod"></el-input>
            <el-button type="primary" icon="el-icon-circle-plus-outline" v-if="!tagsShwo"
              @click="tagsShwo = true"></el-button>
          </span>
        </el-col>
      </el-row>
    </div> -->
    <div class="list-group">
      <el-row :gutter="3">
        <el-col :span="3">
          <div class="list-title"><span class="mast-icon" v-if="modelList.sort.request">*</span>{{ modelList.sort.name }}:
          </div>
        </el-col>
        <el-col :span="3">
          <el-input v-model="modelList.sort.value" :placeholder="modelList.sort.placeholder" type="number"></el-input>
          <!-- <p style="color:red">输入整数,数字越大排名越靠前</p> -->
        </el-col>
      </el-row>
    </div>
    <!-- <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="list-title"><span class="mast-icon" v-if="modelList.status.request">*</span>禁用/启用:</div>
        </el-col>
        <el-col :span="21">
          <el-switch v-model="modelList.status.value" active-text="禁用" inactive-text="启用">
          </el-switch>
        </el-col>
      </el-row>
    </div> -->

    <!-- <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="list-title"><span class="mast-icon" v-if="modelList.path_type.request">*</span>跳转类型:</div>
        </el-col>
        <el-col :span="19">
          <div style="padding-top:10px;">
            <el-radio-group v-model="modelList.path_type.value">
              <el-radio :label="0">无跳转</el-radio>
              <el-radio :label="1">详情内容</el-radio>
              <el-radio :label="2">公众号链接</el-radio>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
    </div> -->

       <!-- <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="list-title"><span class="mast-icon">*</span>详情:</div>
        </el-col>
        <el-col :span="19">
          <div>
            <vue-editor :content="modelList.content.value" ref="myTextIntro"></vue-editor>
          </div>
           
        </el-col>
      </el-row>
    </div> -->

    <!-- <div class="list-group" v-show="modelList.path_type.value > 0">
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="list-title"><span class="mast-icon">*</span>跳转内容:</div>
        </el-col>
        <el-col :span="19">
          <div v-show="modelList.path_type.value == 1">
            <vue-editor :content="modelList.content.value" ref="myTextIntro"></vue-editor>
          </div>
          <div v-show="modelList.path_type.value == 2">
            <el-input v-model="modelList.path.value" placeholder="请输入url"></el-input>
            <p style="padding:6px;font-size:12px;color:red;">(关联公众号文章,必须https开头，如：https:www)</p>
          </div>
        </el-col>
      </el-row>
    </div> -->
    <div class="list-group" v-if="!judge"
      style="display:flex;flex-direction: row;justify-content: center;margin-top:40px;">
      <el-button size="medium" @click="cancel" style="margin-right:40px;">取 消</el-button>
      <el-button size="medium" type="primary" @click="preserve">确 定</el-button>
    </div>
  </div>
</template>

<script>
import api from '@/api/index';
import vueEditor from '@/components/views/commons/VueUeditorWrap';
import imgUpload from '@/components/views/commons/ImgUpload.vue';
import ImgUploadList from '@/components/views/commons/ImgUploadList.vue';
export default {
  name: 'positionAdd',
  components: {
    vueEditor, imgUpload,ImgUploadList
  },
  data: function () {
    return {
      zzTypeist: [],
      cateIdArr: [],
      tags: [],
      tagsVal: '',
      tagsShwo: false,
      gridData: [],
      coverlist: [],
      imgLoadPath: api.API_PATH + api.LOGIN_IMG,
      docLoadPath: api.IMG_PATH,
      videoLoadPath: api.API_PATH + api.UPLOAD_VIDEO,
      videoLoadSrc: api.VIDEO_PATH,
      pageName: '',
      createTime: '',
      ht_names: '',
      createPerson: '',
      modelList: {
        "name": { value: '', request: true, name: '名称', placeholder: '请填写内容', type: 'input' },
         
        "cover": { value: '', request: false, name: '缩略图', placeholder: '请填写内容', type: 'input' },
        // "coverlist": { value: [], request: false, name: '产品图片', placeholder: '请填写内容', type: 'input' },
        "detailimg": { value: '', request: false, name: '详细图', placeholder: '请填写内容', type: 'input' },
        "price": { value: '', request: true, name: '价格', placeholder: '请输入价格', type: 'input' },
        
        
          "cate_id": { value: '', request: true, name: '', placeholder: '', type: 'input' }, 
        
         
        "sort": { value: '', request: false, name: '排序', placeholder: '请输入排序', type: 'input' },
        "status": { value: false, request: false, name: '状态', placeholder: '请输入内容', type: 'input' },
       
        },
      judge: false,
      titleText: '',
      id: '',
      type: '',
      title: '',
      roomLists: [],
      provinceList: [],
      companyList: [],
      followList: [],
      routerPath: '',
      name_zs: '',
      parentPage: 0,
      hosname: '',
      hosid: '',
      serverid: '',
    };
  },
  watch: {
    'modelList.path_type.value': function (val, old) {
      if (val === 0) {
        this.modelList.content.request = false;
        // this.modelList.path.request = false;
      } else if (val === 1) {
        this.modelList.content.request = true;
        // this.modelList.path.request = false;
      } else if (val === 2) {
        this.modelList.content.request = false;
        // this.modelList.path.request = true;
      }
    }
  },
  mounted() {
    this.id = this.$route.query.id;//付款记录id
    this.type = this.$route.query.type;//查看类型
    this.serverid = this.$route.query.serverid;
    this.hosname = this.$route.query.hosname; 
    this.hosid = this.$route.query.hosid; 
    if (this.type == 1) {
      this.titleText = "新增";
    } else if (this.type == 2) {
      this.judge = false;
      this.titleText = "编辑";
      this.initAjaxDetail();
    } else if (this.type == 3) {
      this.initAjaxDetail();
      this.judge = true;
      this.titleText = "查看";
    }
     this.ohterAjaxMethd();
  },
  methods: {
    delVideo() {
      this.modelList.video_path.value = '';
    },
    tagInputMethod() {
      if (this.tagsVal.trim() !== '') {
        this.tags.push(this.tagsVal);
        this.tagsVal = '';
      }
      this.tagsShwo = false;
    },
    tagClose(index) {
      this.tags.splice(index, 1);
    },
    //保存
    preserve() {
      if (this.type == 1) {
        this.addAjaxMethod();
      } else if (this.type == 2) {
        this.editAjaxMethod();
      }

    },
    //取消
    cancel() {
      this.$router.back();
    },
    //详细信息api
    initAjaxDetail() {
      const loading = this.$loading({ text: '加载中...' });
      this.$http.post(api.GOODS_DETAIL, { id: this.id })
        .then((res) => {
          console.log('res', res);
          loading.close();
          if (res.code == 1) {
            this.modelList.name.value = res.data.name; 
            this.modelList.cover.value = res.data.cover;
            this.modelList.detailimg.value = res.data.detailimg;
            //  this.modelList.coverlist.value = res.data.coverlist;
            this.modelList.status.value = res.data.status;            
            this.modelList.price.value = res.data.price;
            // this.modelList.content.value= res.data.content;
            this.modelList.cate_id.value = res.data.cate_id;
            this.modelList.detailimg.value = res.data.detailimg;
            // this.cateIdArr = res.data.cate_parent_ids ? (Array.isArray(res.data.cate_parent_ids.split(',')) ? res.data.cate_parent_ids.split(',') : []) : [];
            // this.cateIdArr.map(item => Number(item))
            this.modelList.sort.value = res.data.sort; 
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    ohterAjaxMethd() {
      this.modelList.cate_id.value = '';
      this.cateIdArr = [];
      
       
      this.$http.post(api.goods_CATE_LIST, { 'openid': 11 })
        .then((res) => {
          console.log('城市列表', res);
          if (res.code == 1) {
             this.cateIdArr = Array.isArray(res.data) && res.data.length > 0 ? res.data : '';
           
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    //编辑
    editAjaxMethod() {
      //验证
      let test = this.testMethod();
      if (!test.flag) {
        this.$message.error(test.msg);
        return false;
      } else {
        test.data.id = this.id;
      }
      console.log('test.data', test.data);
      const loading = this.$loading({ text: '加载中...' });
      this.$http.post(api.GOODS_EDIT, test.data)
        .then((res) => {
          loading.close();
          if (res.code == 1) {
            this.$message.success('编辑成功');
            setTimeout(() => {
              this.$router.push({ path: '/goods' });
              
            }, 1000);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    //新增api
    addAjaxMethod() {
      //验证
      let test = this.testMethod();
      console.log('test.data', test.data);
      if (!test.flag) {
        this.$message.error(test.msg);
        return false;
      }
      // hosname: '',
      // hosid: '',
      // serverid: '',
      test.data.hosid=this.hosid;
      const loading = this.$loading({ text: '加载中...' });
      this.$http.post(api.GOODS_ADD, test.data)
        .then((res) => {
          loading.close();
          if (res.code == 1) {
            this.$message.success('添加成功');
            setTimeout(() => {
              this.$router.push({ path: '/goods', query: { type: 2,hosid:this.hosid,serverid:this.serverid } })
              // this.$router.push({ path: '/goods' });
            }, 1000);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    //验证方法
    testMethod() {
      let flag = true, msg = '', data = {};
      //  this.modelList.content.value = this.$refs['myTextIntro'].getContent();
      // this.modelList.skill.value = this.tags.join(',')
      // this.modelList.cover.value = this.modelList.cover.value.join(','); // 多图上传 
      // this.coverlist1 = this.modelList.coverlist.value.join(',');
      // let cateIdArr = this.cateIdArr.join(',')
      for (let i in this.modelList) {
        if (this.modelList[i].request) {
          if (!this.modelList[i].value || this.modelList[i].value == '') {
            flag = false;
            msg = this.modelList[i].placeholder;
            break;
          }
        }
      }
      if (flag) {
        data = {
  
          "name": this.modelList.name.value,
          "cover": this.modelList.cover.value,
          "detailimg": this.modelList.detailimg.value,
        
           "status": this.modelList.status.value,
          "price": this.modelList.price.value,
          // "proceedingendtime": this.modelList.proceedingendtime.value,
        
          "cate_id": this.modelList.cate_id.value,
           
          "sort": this.modelList.sort.value
        };
      }
      return { flag: flag, msg: msg, data: data };
    },
    //预登记headerpc头部 
    handleHeaderSuccess(res, file) {
      console.log(res);
      if (res.code == 0) {
        this.$message({
          type: 'warning',
          message: res.msg
        });
        return false;
      }
      this.modelList.cover.value = res.data;
      this.modelList.coverlist.value = res.data;
    },
    handleHeaderSuccess1(res, file) {
      console.log(res);
      if (res.code == 0) {
        this.$message({
          type: 'warning',
          message: res.msg
        });
        return false;
      }
      this.modelList.banner_cover.value = res.data;
    },
    beforeHeaderUpload(file) {
      var FileExt = file.name.replace(/.+\./, '');
      if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].indexOf(FileExt.toLowerCase()) === -1) {
        this.$message({
          type: 'warning',
          message: '请上传jpg,jpeg,png,gif,bmp格式文件！'
        });
        return false;
      }
    },
    videoHeaderSuccess(res, file) {
      this.videoLoading.close();
      if (res.code == 0) {
        this.$message({
          type: 'warning',
          message: res.msg
        });
        return false;
      }
      this.$message.success('上传成功');
      this.modelList.video_path.value = res.data;
    },
    videoHeaderUpload(file) {
      var FileExt = file.name.replace(/.+\./, '');
      if (['mp4', 'mpeg', 'mov', 'm4v', '3gp', 'avi', 'm3u8'].indexOf(FileExt.toLowerCase()) === -1) {
        this.$message({
          type: 'warning',
          message: '请上传mp4、mpeg、mov、m4v、3gp、avi、m3u8文件！'
        });
        return false;
      }
      const fileSize = this.fileSize(file.size, 'm', 50);
      if (fileSize.code == 0) {
        this.$message({
          type: 'warning',
          message: fileSize.msg
        });
        return false;
      }
      this.videoLoading = this.$loading({ text: '上传中...' });
    },
    fileSize(fileSize, unit, size = 0) {
      let total = 0;
      if (unit == 'm') {
        total = fileSize / 1024 / 1024;
      } else if (unit == 'kb') {
        total = fileSize / 1024;
      }
      if (total > size) {
        return { code: 0, msg: '文件大小请控制在' + size + unit + '以内!' };
      }
      return { code: 1 };
    },
  }
};
</script>


<style scoped>
.list-title {
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  color: #333;
}

.list-group {
  padding: 10px 0;
}

.del-video-btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99;
}

h2 {
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  position: relative;
}

h2:after {
  content: '';
  display: inline-block;
  width: 3px;
  height: 15px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: #409eff;
}

.map-group {
  position: relative;
}

.map-search {
  display: flex;
  align-items: center;
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 10px;
  width: 400px;
  background: #fff;
  z-index: 300;
}

.map-search input {
  height: 40px;
  border: 1px solid #eee;
  font-size: 14px;
  color: #888;
  flex-grow: 1;
  outline: none;
}

.serarch-result {
  position: absolute;
  top: 55px;
  left: 0;
  right: 0;
  box-shadow: 1px 1px 4px -3px #000;
  background-color: #fff;
  max-height: 300px;
}

.serarch-list {
  border-bottom: 1px solid #eee;
}

.serarch-list:hover {
  cursor: pointer;
  background-color: #eee;
}

.serarch-rows {
  display: flex;
  padding: 6px 10px;
  font-size: 14px;
  color: #333;
  align-items: center;
}

.serarch-rows span:nth-child(1) {
  margin-right: 10px;
}
</style>
